<!DOCTYPE html>
<html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>自己练习  双向改变</title>
      </head>
      <body>
      <!--
      1. 计算属性
        在computed属性对象中定义计算属性的方法
        在页面中使用{{方法名}}来显示计算的结果
      2. 监视属性:
        通过通过vm对象的$watch()或watch配置来监视指定的属性
        当属性变化时, 回调函数自动调用, 在函数内部进行计算
      3. 计算属性高级:
        通过getter/setter实现对属性数据的显示和监视
        计算属性存在缓存, 多次读取只执行一次getter计算
      -->
              <div id="demo">
                  姓: <input type="text" placeholder="请输入 姓" v-model="name1"><br>
                  名: <input type="text" placeholder="请输入 名" v-model="name2"><br>
                  <!--name3 是根据 name1 和 name2 计算产生-->
                  姓 名 (双向改变): <input type="text" placeholder="" v-model="name3"><br>
              </div>
      </body>
</html>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
       var vm =  new Vue({
              el : "#demo",
              data : {
                    name1 : "a",
                    name2 : "b",
              },
             computed :  {
                  name3 : {
                        get : function (val) {
                            console.log(val)
                            return   this.name1  + '_' + this.name2

                        },
                      set : function (val)  {
                           var str =  val.split('_')
                          console.log(str[0],str[1])
                          this.name1=str[0]
                          this.name2=str[1]
                      }
                  }

             }
        })

</script>

